<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>邀请奖励</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        .page {
            width: 100%;
            height: 100%;
            font-size: 0;
            position: relative;
        }

        .page .head {
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            padding: 0 0.2rem;
            box-sizing: border-box;
            position: absolute;
            top: 0;
            left: 0;
        }

        .page .head .one {
            width: 0.4rem;
        }

        .page .head .one img {
            width: 100%;
        }

        .page .head .two {
            font-size: 0.36rem;
            font-weight: bold;
            color: #111;
        }

        .page .head .three {
            font-size: 0.3rem;
            color: #333;
        }

        .page .content {
            position: absolute;
            top: 1rem;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            background-image: url('./img/bgcolor.png');
            background-size: cover;
            background-repeat: no-repeat;
            overflow-y: scroll;
        }

        .page .content::-webkit-scrollbar {
            display: none;
        }

        .page .content .first {
            width: 100%;
            padding: 0.2rem 0;
            box-sizing: border-box;
            text-align: center;
        }

        .page .content .first div:nth-child(1) {
            color: #fc3c2d;
            background-color: #fae100;
            display: inline-block;
            width: 1.02rem;
            height: 0.37rem;
            text-align: center;
            line-height: 0.37rem;
            border-radius: .25rem .25rem 0 .25rem;
            position: absolute;
            top: 1rem;
            right: 2.36rem;
            font-size: 0.2rem;
        }

        .page .content .first div:nth-child(2) {
            font-size: .72rem;
            font-family: SimHei;
            font-weight: bold;
            color: rgba(255, 252, 244, 1);
            text-shadow: 2px 2px 2px rgba(255, 79, 50, 0.9);
            position: absolute;
            top: 1rem;
            width: 100%;
        }

        .page .content .first div:nth-child(2) strong {
            font-size: 1.5rem;
            color: #FAE100;
            font-style: oblique;
            font-weight: inherit;
        }

        .page .content .first div:nth-child(3) {
            font-size: .3rem;
            font-family: SimHei;
            font-weight: 400;
            color: rgba(255, 252, 244, 1);
            text-shadow: 0px 3px 5px rgba(254, 43, 22, 1);
            position: absolute;
            top: 2.3rem;
            right: 1.7rem;
        }

        .page .content .first div:nth-child(3) strong {
            font-size: 0.8rem;
            vertical-align: -0.05rem;
        }

        .page .content .rule {
            position: absolute;
            top: 3.25rem;
            right: 0;
            padding: 0.1rem 0.15rem;
            box-sizing: border-box;
            font-size: .22rem;
            font-family: SimHei;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            background-color: #fee2db;
            border-radius: 0.25rem 0 0 0.25rem;
        }

        .page .content .tixian {
            width: 90%;
            border-radius: 0.15rem;
            background-color: #fff;
            padding: 0.15rem;
            box-sizing: border-box;
            position: absolute;
            top: 8rem;
            left: 0;
            right: 0;
            margin: 0 auto;

        }

        .page .content .tixian .top {
            display: flex;
            width: 100%;
            justify-content: space-between;

        }

        .page .content .tixian .top span {
            display: inline-block;
            padding: 0.1rem;
            box-sizing: border-box;
            font-size: 0.24rem;
        }

        .page .content .tixian .top span:nth-child(1) {
            color: #666666;
        }

        .page .content .tixian .top span:nth-child(2) {
            color: #36E5FB;
        }

        .page .content .tixian .bottom {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: 0.2rem;
            padding: 0.2rem 0;
            box-sizing: border-box;
        }

        .page .content .tixian .bottom .spn1 {
            font-size: 0.26rem;
            color: #111111;
            font-weight: bold;
            margin-right: 0.1rem;

        }

        .page .content .tixian .bottom .ipt1 {
            font-weight: bold;
            font-size: 0.26rem;
            color: #111;
            height: 0.45rem;
            text-indent: 0.1rem;
            width: 4rem;

        }

        .page .content .tixian .bottom .ipt1::placeholder {
            font-weight: bold;
            color: #111;
            font-size: 0.4rem;
        }

        .page .content .tixian .bottom .spn2 {
            width: 1.57rem;
            height: .66rem;
            background: linear-gradient(90deg, rgba(57, 241, 255, 1), rgba(57, 157, 255, 1));
            border-radius: .33rem;
            line-height: 0.66rem;
            text-align: center;
            font-size: 0.3rem;
            color: #fff;
        }

        .page .content .tixian .bottom .spn3 {
            font-size: 0.3rem;
            color: #111;
            font-weight: bold;
            width: 1.57rem;
            height: .66rem;
            line-height: 0.66rem;
            text-align: right;
            padding-right: 0.15rem;
        }

        .page .content .nowPay {
            width: 95%;
            height: 1.04rem;
            line-height: 1.04rem;
            background: rgba(250, 225, 0, 1);
            border-radius: .52rem;
            text-align: center;
            color: #111;
            font-size: 0.32rem;
            margin: 0 auto;
            position: absolute;
            top: 11rem;
            left: 0;
            right: 0;
            font-weight: bold;
            margin-bottom: 0.3rem;
        }
    </style>
</head>

<body>
    <div class="page">
        <div class="head">
            <div class="one"><img src="./img/left_arrow.png" alt=""> </div>
            <div class="two">邀请奖励</div>
            <div class="three">排行榜</div>
        </div>
        <div class="content">
            <div class="first">
                <div>可提现</div>
                <div>邀请好友分成<strong>10</strong> %</div>
                <div>每邀请1位好友额外得<strong>3</strong>元</div>
            </div>
            <div class="rule" id="rule">规则说明</div>
            <div class="jiangjin"></div>
            <div class="tixian">
                <div class="top"><span>邀请金额</span><span>邀请明细</span></div>
                <div class="bottom">
                    <span class="spn1">￥</span>
                    <input type="number" placeholder="0.00" class="ipt1">
                    <span class="spn2">提现</span><span class="spn3">兑换</span>

                </div>
            </div>
            <div class="nowPay">立即邀请</div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="./js/rem.js"></script>
    <script>
        document.addEventListener('plusready', function () {
            //console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
           
        });
        $(document).ready(function () {
                $('#rule').click(function () {
                    // $(location).attr('href', 'yaoqing.html')
                    window.location.href='yaoqing.html'

                })
            })



    </script>
</body>

</html>